<template>
  <div>
    <h1>Home</h1>
    <div class="home-main">
      <router-view />
    </div>
    <div class="home-menu">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">工作中心</van-tabbar-item>
        <van-tabbar-item icon="search">云检查</van-tabbar-item>
        <van-tabbar-item icon="friends-o">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'

@Options({
  components: {
  },
  watch: {
    active (newValue, oldValue) {
      console.log('newValue', newValue)
      const routeMap = [
        'workCenter',
        'cloudInspect',
        'personalCenter'
      ]
      this.$router.replace({
        path: routeMap[newValue]
      })
    }
  }
})
export default class Home extends Vue {
  active = 0

  created () {
    console.log('this.active', this.active)
  }
}
</script>
<style lang="less">
.home-main {
  width: 100%;
  height: 100%;
}

.home-menu {
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 100%;
  .van-tabbar {
    height: 80px;
  }
}
</style>
